<template>
    <div class="cart-page">
        <div class="car-top">
            <ul>
                <li style="width: 26px">
                    <img src="/picture/home/gallery/location.png" alt="" />
                </li>
                <li>首页></li>
                <li>采购车</li>
            </ul>
        </div>
        <div class="cart-content">
            <div class="car-pic">
                <img src="/picture/home/car_logo.jpg" alt="" />
                <div class="midImg">
                    <p style="color: #f40">我的采购车</p>
                    <p style="width: 44%">核对订单信息</p>
                    <p>我的采购车</p>
                </div>
                <span>起送金额：满<b>500</b>元起送</span>
            </div>
            <form action="">
                <div class="address">
                    <div class="select-ad">选择地址</div>
                    <div class="add-content">
                        <!-- <i></i> -->
                        <ul>
                            <li>
                                <input type="radio" style="float: left;" checked />
                                <span class="cell">测试单不发货</span>
                                <span class="cell">安徽省 合肥市 包河区 上海路18号</span>
                                <span class="cell">/0551-63660923</span>
                                <span class="cell" style="margin-left: 0">(合肥好之佳大药房有限公司)</span>
                                <span style="background: #e8e7e7">默认地址</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="invoice">
                    <div class="invoice-info">发票信息</div>
                    <div class="invoice-content">
                        <div class="invoice-checkbox">
                            <input type="checkbox" checked style="line-height: 29px">
                            <a href="#" style="margin-top:10px;display:inline-block"
                                @click.prevent="invoiceVisible = true">修改</a>
                        </div>
                        <el-dialog title="修改发票信息" :visible.sync="invoiceVisible" width="483px" :show-close="false"
                            :close-on-click-modal="false" center>
                            <span>发票类型：</span>
                            <el-radio-group v-model="radio" style="margin-bottom: 20px;">
                                <el-radio :label="'增值税电子普通发票'">增值税电子普通发票</el-radio>
                                <el-radio :label="'增值税纸质普通发票'">增值税纸质普通发票</el-radio>
                                <el-radio :label="'增值税专用发票'">增值税专用发票</el-radio>
                            </el-radio-group>
                            <span slot="footer" class="dialog-footer">
                                <el-button size="mini" style="background-color: #d63204;color:#fff;"
                                    @click="submit">提交</el-button>
                                <el-button size="mini" style="background-color: #fff;color:#606266;"
                                    @click="cancelInvoice">取 消</el-button>
                            </span>
                        </el-dialog>
                        <div class="invoice-main">
                            <div class="in">
                                <span>
                                    <b>发票类型：</b>
                                    <label for="">{{realRadio}}</label>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shop-car">
                    <div class="shop-car-buy">采购车</div>
                    <ul class="car-ul" v-if="checkbox.length">
                        <li style="width:680px;">商品名称</li>
                        <li style="width:115px;">单价</li>
                        <li style="width:160px;">购买数量</li>
                        <li style="width:105px;">小计</li>
                        <li style="width:85px;border-right:none;">操作</li>
                    </ul>
                    <div class="sale-content">
                        <div class="title_box" v-if="checkbox.length">
                            <div class="txt">【促销】618自营商品满赠</div>
                        </div>
                        <div class="content-box" v-if="checkbox.length">
                            <div class="box-out" v-for="(item) in checkbox" :key="item.id">
                                <div class="box-one">
                                    <label for="">
                                        <input type="checkbox" v-model="item.checked">
                                    </label>
                                    <div class="goods-img">
                                        <img src="/picture/home/ungoodsphoto.png" alt=""
                                            style="width:100%;height:100%;">
                                    </div>
                                    <div class="goods-desc">
                                        <p>通用名：康复新液</p>
                                        <p>商品名：康复新液</p>
                                        <p>生产商：四川好医生攀西药业有限责任公司</p>
                                    </div>
                                    <div class="goods-detail">
                                        <p>单位：盒</p>
                                        <p>规格：50ml*2瓶</p>
                                        <p>效期：优于2026-01-05</p>
                                    </div>
                                </div>
                                <div class="box-two">
                                    <span>¥{{item.price}}</span>
                                </div>
                                <div class="box-three">
                                    <div class="num">
                                        <a href="#" @click.prevent="reduce(item.id)">-</a>
                                        <input type="text" v-model="item.num" @input="onInput(item.id)" />
                                        <a href="#" @click.prevent="add(item.id)">+</a>
                                    </div>
                                    <p style="line-height: 24px;">(库存：>150)</p>
                                </div>
                                <div class="box-four">
                                    <span>￥{{(item.price*item.num).toFixed(2)}}</span>
                                </div>
                                <div class="box-five">
                                    <a class="a1" href="#" @click.prevent="del(item.id)">删除</a>
                                    <span>|</span>
                                    <a class="a2" href="#"
                                        @click.prevent="collect(item.id,$event)">{{item.isCollect?'取消':'收藏'}}</a>
                                </div>

                            </div>
                        </div>
                        <div class="empty-car" v-else>
                            <img src="/picture/home/hearder_car_no.png" alt="">
                            <div style="float:left;">
                                <span>亲！您的采购车空荡荡的，快去选择您心仪的产品吧！</span>
                                <a href="#" @click.prevent="">去购物</a>
                            </div>
                        </div>
                    </div>
                    <div class="car-pay">
                        <label for="">
                            <input type="checkbox" v-model="selectedAll">
                            <span>全选</span>
                            <span>({{selectedNum}})</span>
                        </label>
                        <a class="a1" href="#" @click.prevent="batchDel">
                            批量删除
                        </a>
                        <a class="a1" href="#" @click.prevent="batchCollect">
                            批量收藏
                        </a>
                        <a class="a2" v-if="checkbox.length" href="#" @click.prevent="messageVisible=true">
                            留言
                        </a>
                        <a class="a2" v-else style="background:#999;" href="#" @click.prevent="">
                            留言
                        </a>
                        <el-dialog title="订单备注" :visible.sync="messageVisible" width="500px" center :show-close="false"
                            :close-on-click-modal="false">
                            <span>
                                <el-input type="textarea" placeholder="请输入您要跟开单员说的话" v-model="textarea" maxlength="100"
                                    show-word-limit rows="10">
                                </el-input>
                            </span>
                            <span slot="footer" class="dialog-footer">
                                <el-button @click="onSave" size="mini"
                                    style="background-color: #e54144;color:#fff;">保存</el-button>
                            </span>
                        </el-dialog>
                        <a class="a2" v-if="checkbox.length" style="float:right;" href="#" @click.prevent="goPay">
                            结算
                        </a>
                        <a class="a2" v-else style="float:right;background:#999;" href="#" @click.prevent="">
                            结算
                        </a>
                        <span class="pay-detail">
                            <span class="discount">已优惠：¥0.00元</span>
                            商品总价(不含运费)：
                            <span class="price">¥{{totalPrice.toFixed(2)}}</span>元
                        </span>
                    </div>
                </div>
            </form>
            <div class="coupon-box" v-if="coupons">
                <h3>优惠券使用 (优惠券{{couponCount}}张，优惠{{couponMoney}}元) </h3>
                <div style="padding: 20px;">
                    <div class="coupon-item" v-for="(item,index) in couponList" :key="item.id"
                        :class="{'forbidden-border':selectedPrice<item.price,'selected-border':activeIndex===index && selectedPrice>item.price && couponUse}">
                        <div class="coupon-content" @click="couponSelected(index)">
                            <div class="coupon-top" :class="{forbidden:selectedPrice<item.price}">
                                <div>
                                    <div class="coupon-money"><span>￥{{item.couponPrice}}</span></div>
                                    <div class="coupon-mj"><span>满{{item.price}}可用</span></div>
                                </div>
                                <div class="coupon-time">
                                    有效期至<span>2023.08.31</span>
                                </div>
                            </div>
                            <div class="coupon-bottom">
                                不与其他特价活动同享
                            </div>
                            <img v-if="activeIndex===index && selectedPrice>item.price && couponUse"
                                src="http://mall.huida.cc/picture/home/gou.png" alt="">
                        </div>
                        <div class="tip">
                            <i class="el-icon-info"></i>
                            <span style="color: #ccc;">所结算的商品中没有符合条件的商品</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import { doCollect, doBatchCollect } from '@/api/cart.js'
    import scrollMixin from '../../minixs/scrollEvent'

    export default {
        data() {
            return {
                checkbox: [{ id: 1, checked: true, num: 1, price: 19.8, isCollect: false }, { id: 2, checked: true, num: 2, price: 199.8, isCollect: false }, { id: 3, checked: true, num: 5, price: 319.8, isCollect: false }],
                invoiceVisible: false,//发票信息弹窗
                radio: '增值税电子普通发票',//发票选项
                realRadio: '增值税电子普通发票',//发票信息
                messageVisible: false,//留言弹窗
                textarea: '',//留言内容
                flag: false, //是否有优惠卷
                coupons: true,// 是否领取了优惠卷
                activeIndex: '', //选中的优惠卷
                couponCount: 0, //优惠卷使用数量
                couponUse: false, //优惠卷是否使用
                couponMoney: 0, //优惠卷使用金额
                totalPrice: 0, //总价
                couponList: [
                    { id: 1, price: 1000, couponPrice: 100 },
                    { id: 2, price: 2000, couponPrice: 200 },
                    { id: 3, price: 3000, couponPrice: 300 },
                    { id: 4, price: 4000, couponPrice: 400 },
                ] //优惠卷列表

            }
        },
        mixins: [scrollMixin],
        methods: {
            //优惠卷选择
            couponSelected(index) {
                this.flag = true
                if (this.activeIndex === index) {
                    this.couponUse = !this.couponUse
                } else {
                    this.activeIndex = index
                    this.couponUse = true
                }
                this.couponCount = this.couponUse ? 1 : 0;
                this.couponMoney = this.couponUse ? this.couponList[this.activeIndex].couponPrice : 0;
                this.totalPrice = this.couponUse ? this.selectedPrice - this.couponMoney : this.selectedPrice
                const loading = this.$loading({
                    text: 'Loading',
                    spinner: 'el-icon-more',
                    background: 'transparent',
                });
                setTimeout(() => {
                    loading.close();
                }, 1000);


            },
            //发票信息提交
            submit() {
                this.invoiceVisible = false
                this.realRadio = this.radio
            },
            //发票信息取消
            cancelInvoice() {
                this.invoiceVisible = false
                this.radio = this.realRadio
            },
            //购物车数量减少
            reduce(id) {
                let item = this.checkbox.find(item => item.id === id)
                if (item.num <= 1) return this.$message({
                    type: 'warning',
                    message: '数量不能小于1'
                })
                item.num--
            },
            //购物车数量增加
            add(id) {
                let item = this.checkbox.find(item => item.id === id)
                if (item.num >= 150) return this.$message({
                    type: 'warning',
                    message: '库存不足'
                })
                item.num++
            },
            //购物车输入数量
            onInput(id) {
                let item = this.checkbox.find(item => item.id === id)
                if (item.num < 1) {
                    this.$message({
                        type: 'warning',
                        message: '数量不能小于1'
                    })
                    item.num = 1
                }
                if (item.num > 150) {
                    this.$message({
                        type: 'warning',
                        message: '库存不足'
                    })
                    item.num = 150
                }
            },
            //购物车删除
            del(id) {
                this.$confirm('您可以选择加入收藏，或删除商品。', '删除', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    showClose: false,
                    closeOnClickModal: false,
                    confirmButtonClass: 'my-confirm-button',
                    cancelButtonClass: 'my-cancel-button',
                    type: 'warning'
                }).then(() => {
                    this.checkbox = this.checkbox.filter(item => item.id !== id)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //购物车收藏
            async collect(id, e) {
                if (e.target.innerText === '收藏') {
                    // const res = await doCollect(id)
                    // console.log(res);
                    e.target.innerText = '取消'
                    this.$message({
                        type: 'success',
                        message: '收藏成功!'
                    });
                } else {
                    // const res = await doCollect(id)
                    // console.log(res);
                    e.target.innerText = '收藏'
                    this.$message({
                        type: 'warning',
                        message: '取消收藏!'
                    });
                }
            },
            //批量删除
            batchDel() {
                if (!this.checkbox.some(item => item.checked)) return this.$message('请选择商品')
                this.$confirm('您确定要删除所选商品吗？', '删除', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    showClose: false,
                    closeOnClickModal: false,
                    confirmButtonClass: 'my-confirm-button',
                    cancelButtonClass: 'my-cancel-button',
                    type: 'warning'
                }).then(() => {
                    this.checkbox = this.checkbox.filter(item => !item.checked)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //批量收藏
            async batchCollect() {
                if (!this.checkbox.some(item => item.checked)) return this.$message('请选择商品')
                const arr = []
                this.checkbox.forEach(item => {
                    if (item.checked) {
                        item.isCollect = true
                        arr.push(item.id)
                    }
                })
                await doBatchCollect(arr.join(','))
                this.$message({
                    type: 'success',
                    message: '收藏成功!'
                });
            },
            //留言
            onSave() {
                this.messageVisible = false

            },
            //去结算
            goPay() {
                if (!this.checkbox.some(item => item.checked)) return this.$message('请选择商品')
                if (this.selectedPrice < 500) return this.payOpen()
                this.dependPay()
            },
            //支付提醒弹窗
            payOpen() {
                this.$confirm('请注意，您订单不满起送金额500元，需要额外支付运费30元，是否仍要提交', '信息', {
                    confirmButtonText: '提交',
                    cancelButtonText: '取消',
                    showClose: false,
                    closeOnClickModal: false,
                    confirmButtonClass: 'my-confirm-button',
                    cancelButtonClass: 'my-cancel-button',
                    center: true
                }).then(() => {
                    if (this.coupons) return this.$router.push('/payOrder')
                    if (!this.flag) return this.coupon()
                    this.$router.push('/payOrder')
                }).catch(() => {

                });
            },
            //决定支付弹窗
            dependPay() {
                this.$confirm('您确认要提交订单吗？', '信息', {
                    confirmButtonText: '提交',
                    confirmButtonClass: 'my-confirm-button',
                    cancelButtonClass: 'my-cancel-button',
                    cancelButtonText: '取消',
                    showClose: false,
                    closeOnClickModal: false,
                    center: true
                }).then(() => {
                    if (this.coupons) return this.$router.push('/payOrder')
                    if (!this.flag) return this.coupon()
                    this.$router.push('/payOrder')
                }).catch(() => {

                });
            },
            // 优惠卷弹窗
            coupon() {
                this.$confirm('存在可领优惠券，是否先领券', '信息', {
                    confirmButtonText: '确定',
                    cancelButtonText: '知道了',
                    confirmButtonClass: 'my-confirm-button',
                    cancelButtonClass: 'my-cancel-button',
                    showClose: false,
                    closeOnClickModal: false,
                    center: true
                }).then(() => {
                    this.flag = true
                }).catch(() => {
                    this.flag = true
                });
            }
        },
        watch: {
            // 当选中的使用金额小于总价时，取消选中
            selectedPrice: {
                handler(val) {
                    this.totalPrice = this.couponUse ? val - this.couponMoney : val
                    if (val < 1000) {
                        this.activeIndex = ''
                        this.couponUse = false
                    }
                },
                immediate: true
            }
        },
        computed: {
            //选中数量
            selectedNum() {
                return this.checkbox.filter(item => item.checked).length
            },
            //优惠卷使用价格
            selectedPrice() {
                return this.checkbox.filter(item => item.checked).reduce((total, item) => total + item.num * item.price, 0)
            },
            //全选
            selectedAll: {
                get() {
                    if (this.checkbox.length === 0) return false;
                    return this.checkbox.every(item => item.checked);
                },
                set(val) {
                    this.checkbox.forEach(item => item.checked = val)
                }
            }

        }
    }
</script>

<style scoped lang="scss">
    .cart-page {
        background-color: #fff;

        .car-top {
            width: 1160px;
            margin: auto;
            height: 43px;
            line-height: 43px;
            color: #666;

            ul {
                margin: 0px;
                padding: 0px;
                list-style: none;

                li {
                    list-style-type: none;
                    float: left;
                }
            }
        }

        .cart-content {
            width: 1160px;
            margin: auto;
            font-size: 12px;
            font-family: Simsun;
            color: #333;

            .car-pic {
                width: 100%;
                height: 100px;
                position: relative;

                img {
                    margin: 0 25px 25px 0;
                    float: left;
                }

                .midImg {
                    width: 470px;
                    float: left;
                    margin-right: 40px;
                    padding-top: 50px;
                    font-size: 12px;
                    font-family: Simsun;
                    height: 22px;
                    line-height: 22px;
                    text-align: center;
                    color: #848484;
                    background: url('http://mall.huida.cc/picture/home/car_one.png') no-repeat;

                    p {
                        width: 28%;
                        float: left;
                    }
                }

                span {
                    font-size: 16px;
                    color: #666;
                    float: left;
                    margin-top: 16px;
                }
            }

            form {
                .address {
                    border: 1px solid #e1e1e1;
                    width: 1158px;
                    height: auto;

                    .select-ad {
                        border: 1px solid #ddd;
                        border-bottom: 0;
                        font-size: 16px;
                        font-family: 思源黑体;
                        line-height: 30px;
                        height: 32px;
                        color: rgb(237, 112, 32);
                        padding-left: 25px;
                        background: url('http://mall.huida.cc/picture/home/car_title_img.png');
                    }

                    .add-content {
                        position: relative;
                        padding: 10px 30px;

                        i {
                            position: absolute;
                            right: 15px;
                            float: right;
                            width: 18px;
                            height: 18px;
                            background: url('http://mall.huida.cc/picture/home/tri_d.png') #ff8c00;
                            margin: 3px 3px 0;
                            cursor: pointer;
                        }

                        ul {
                            margin-right: 0;
                            min-height: 24px;
                            line-height: 24px;

                            li {
                                display: inline-block;
                                height: auto;
                                width: 100%;
                                line-height: 24px;

                                span {
                                    display: block;
                                    float: left;
                                    margin-left: 20px;
                                }

                                .cell {
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                }

                .invoice {
                    display: block;
                    border: 1px solid #e1e1e1;
                    width: 1158px;
                    height: 100px;
                    margin-top: 10px;

                    .invoice-info {
                        font-size: 16px;
                        font-family: 思源黑体;
                        line-height: 30px;
                        height: 32px;
                        color: rgb(237, 112, 32);
                        padding-left: 25px;
                        background: url('http://mall.huida.cc/picture/home/car_title_img.png');
                    }

                    .invoice-content {
                        padding: 10px 0px 10px 15px;
                        height: 48px;
                        width: auto;

                        ::v-deep .el-dialog__header {
                            background-color: #d63204;
                            text-align: left;
                            height: 15px;
                            position: relative;

                            .el-dialog__title {
                                color: #fff;
                                font-family: 'Franklin Gothic Medium',
                                    'Arial Narrow', Arial, sans-serif;
                                position: absolute;
                                top: 10px;
                                left: 10px;
                            }
                        }

                        ::v-deep .el-radio-group {
                            margin-top: 10px;
                            display: flex;
                            flex-direction: column;

                            .el-radio {
                                margin-bottom: 10px;
                            }
                        }

                        ::v-deep .el-dialog__body {
                            padding-left: 50px;
                        }

                        .invoice-checkbox {
                            min-height: 46px;
                            width: 30px;
                            float: left;

                            a {
                                font-size: 12px;
                                color: dodgerblue;
                            }
                        }

                        .invoice-main {
                            min-height: 46px;
                            line-height: 46px;
                            float: left;
                            width: 1113px;

                            .in {
                                height: auto;
                                line-height: 24px;

                                span {
                                    display: block;
                                    float: left;
                                    width: 24%;
                                    text-indent: 10px;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    overflow: hidden;
                                }
                            }
                        }
                    }
                }

                .shop-car {
                    width: 1158px;
                    height: auto;
                    margin-top: 10px;

                    .shop-car-buy {
                        border: 1px solid #ddd;
                        border-bottom: 0;
                        font-size: 16px;
                        font-family: 思源黑体;
                        line-height: 30px;
                        height: 32px;
                        color: rgb(237, 112, 32);
                        padding-left: 25px;
                        background: url('http://mall.huida.cc/picture/home/car_title_img.png');
                    }

                    .car-ul {
                        border: 1px solid #ccc;
                        border-top: 0;
                        position: relative;
                        box-sizing: border-box;
                        width: 100%;
                        text-align: center;
                        background: #f6f6f6;
                        color: #000;
                        font-weight: 600;
                        height: 28px;
                        line-height: 28px;

                        li {
                            float: left;
                            border-right: 1px solid #ccc;
                        }
                    }

                    .sale-content {
                        margin-bottom: 0px;
                        overflow: hidden;

                        .empty-car {
                            width: 100%;
                            height: 150px;

                            img {
                                margin: 50px 10px 50px 350px;
                                vertical-align: middle;
                                float: left;
                            }

                            span {
                                margin: 55px 0 10px 0;
                                display: inline-block;
                            }

                            a {
                                width: 70px;
                                height: 26px;
                                background-image: -webkit-gradient(linear,
                                        left top,
                                        left bottom,
                                        color-stop(0, #ef5356),
                                        color-stop(1, #eb3d3f));
                                border: none;
                                border-radius: 4px;
                                font-size: 14px;
                                color: #fff;
                                text-shadow: #333 1px 1px 1px;
                                display: block;
                                text-align: center;
                                line-height: 26px;
                            }
                        }

                        .title_box {
                            border: 1px solid #fff;
                            border-bottom: 2px solid #ddd;
                            padding: 5px;
                            font-family: '思源黑体';

                            .txt {
                                display: inline-block;
                                color: #6b6b6b;
                                font-weight: 700;
                            }
                        }

                        .content-box {
                            border-top: 1px solid #ddd;

                            .box-out {
                                border: 1px solid #ccc;
                                border-top: 0;
                                position: relative;
                                box-sizing: border-box;
                                width: 100%;
                                height: 75px;
                                text-align: center;

                                .box-one {
                                    float: left;
                                    border-right: 1px solid #ccc;
                                    height: 75px;
                                    line-height: 75px;
                                    position: relative;
                                    width: 680px;

                                    input {
                                        margin: 31px 20px;
                                        float: left;
                                    }

                                    .goods-img {
                                        float: left;
                                        width: 60px;
                                        height: 60px;
                                        border: 1px solid #ebebeb;
                                        margin: 6px 0 7px 0;
                                        position: relative;
                                    }

                                    .goods-desc {
                                        float: left;
                                        line-height: 22px;
                                        text-align: left;
                                        padding-left: 15px;
                                        margin: 4px 0;
                                        width: 200px;

                                        p {
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            word-wrap: normal;
                                            overflow: hidden;
                                        }
                                    }

                                    .goods-detail {
                                        float: left;
                                        line-height: 22px;
                                        text-align: left;
                                        padding-left: 15px;
                                        margin: 4px 0;
                                        width: 160px;

                                        p {
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                            word-wrap: normal;
                                            overflow: hidden;
                                        }
                                    }
                                }

                                .box-two {
                                    float: left;
                                    border-right: 1px solid #ccc;
                                    height: 75px;
                                    line-height: 75px;
                                    position: relative;
                                    width: 115px;

                                    span {
                                        font-size: 14px;
                                        font-family: 思源黑体;
                                        color: rgb(255, 0, 0);
                                        font-weight: bold;
                                        display: inline-block;
                                        height: 18px;
                                        line-height: 18px;
                                    }
                                }

                                .box-three {
                                    float: left;
                                    border-right: 1px solid #ccc;
                                    height: 75px;
                                    line-height: 75px;
                                    position: relative;
                                    width: 160px;

                                    .num {
                                        width: 88px;
                                        height: 21px;
                                        line-height: 21px;
                                        border: 1px solid #a9a9a9;
                                        color: #a9a9a9;
                                        text-align: center;
                                        margin: 20px 41px 0 43px;

                                        a {
                                            width: 20px;
                                            color: #a9a9a9;
                                            float: left;

                                            &:hover {
                                                background-color: #666666;
                                            }
                                        }

                                        input {
                                            border-left: 1px solid #a9a9a9;
                                            border-right: 1px solid #a9a9a9;
                                            border-top: none;
                                            border-bottom: none;
                                            width: 46px;
                                            float: left;
                                            text-align: center;
                                            margin: 0px;
                                            padding: 0px;
                                            line-height: 21px;
                                            height: 21px;
                                        }
                                    }
                                }

                                .box-four {
                                    width: 105px;
                                    line-height: 14px;
                                    float: left;
                                    border-right: 1px solid #ccc;
                                    height: 75px;
                                    position: relative;

                                    span {
                                        display: inline-block;
                                        margin-top: 30px;
                                        font-size: 14px;
                                        font-family: 思源黑体;
                                        color: rgb(255, 0, 0);
                                        font-weight: bold;
                                        height: 18px;
                                        line-height: 18px;
                                    }
                                }

                                .box-five {
                                    width: 92px;
                                    border-right: none;
                                    float: left;
                                    height: 75px;
                                    line-height: 75px;
                                    position: relative;

                                    .a1 {
                                        height: 22px;
                                        margin-top: 25px;
                                        width: 30px;
                                        line-height: 22px;
                                        float: right;
                                        color: #666;
                                        margin-right: 10px;
                                    }

                                    .a2 {
                                        height: 22px;
                                        margin-top: 25px;
                                        width: 30px;
                                        line-height: 22px;
                                        float: right;
                                        color: #333;
                                    }

                                    span {
                                        padding-right: 2px;
                                        padding-left: 4px;
                                        margin-left: -5px;
                                        float: right;
                                    }
                                }
                            }
                        }
                    }

                    .car-pay {
                        height: 40px;
                        width: 1158px;
                        margin: 0 auto;
                        background: #efefef;

                        ::v-deep .el-dialog__header {
                            background-color: #f8f8f8;
                            text-align: left;
                            height: 15px;
                            position: relative;

                            .el-dialog__title {
                                color: #393939;
                                font-family: 'Franklin Gothic Medium',
                                    'Arial Narrow', Arial, sans-serif;
                                position: absolute;
                                top: 10px;
                                left: 10px;
                            }
                        }

                        label {
                            margin: 0 0 0 20px;
                            float: left;
                            height: 40px;
                            line-height: 40px;
                            color: #666;

                            input {
                                margin: 0 10px 0 0;
                                vertical-align: middle;
                            }
                        }

                        .a1 {
                            line-height: 40px;
                            height: 40px;
                            color: #666;
                            text-align: center;
                            margin: 0 15px;
                            float: left;
                        }

                        .a2 {
                            width: 108px;
                            height: 40px;
                            line-height: 40px;
                            float: left;
                            color: rgb(255, 255, 255);
                            text-align: center;
                            font-size: 18px;
                            letter-spacing: 1px;
                            font-family: 思源黑体;
                            font-weight: bold;
                            text-shadow: rgb(102, 102, 102) 1px 1px 2px;
                            background: rgb(255, 140, 0);
                        }

                        .pay-detail {
                            float: right;
                            line-height: 40px;
                            font-size: 14px;
                            font-family: 思源黑体;
                            padding-right: 15px;
                            letter-spacing: 1px;

                            .discount {
                                color: #999;
                                font-size: 12px;
                            }

                            .price {
                                font-size: 20px;
                                color: #f00;
                            }
                        }
                    }
                }
            }

            .coupon-box {
                margin-top: 20px;
                font-family: 'Arial Negreta', 'Arial';

                h3 {
                    color: #666;
                    padding: 5px 0;
                    border-bottom: 2px solid #ddd;
                }

                .coupon-item {
                    width: 230px;
                    height: 125px;
                    color: #fff;
                    border: 1px solid #74d2d4;
                    box-sizing: border-box;
                    cursor: pointer;
                    position: relative;
                    display: inline-block;
                    margin-right: 20px;
                    margin-bottom: 30px;

                    .tip {
                        position: absolute;
                        color: #666;
                        display: inline-block;
                    }

                    .coupon-content {
                        width: 100%;
                        position: relative;

                        .coupon-top {
                            background-color: #74d2d4;
                            height: 85px;
                            text-align: center;

                            .coupon-money {
                                font-size: 26px;
                                width: 48%;
                                text-align: center;
                                padding-top: 15px;
                                font-weight: 700;
                                display: inline-block;
                            }

                            .coupon-mj {
                                font-size: 14px;
                                width: 48%;
                                text-align: left;
                                display: inline-block;
                            }

                            .coupon-time {
                                padding-top: 8px;
                            }
                        }

                        .coupon-bottom {
                            line-height: 40px;
                            height: 40px;
                            padding-left: 15px;
                            color: #666;
                        }

                        img {
                            position: absolute;
                            display: inline-block;
                            right: 0;
                            bottom: 0;
                            width: 40px;
                            height: 33px;
                        }
                    }
                }
            }
        }
    }

    .forbidden {
        background-color: #aeaeae !important;
    }

    .forbidden-border {
        border: 1px solid #aeaeae !important;
        cursor: not-allowed !important;
        pointer-events: none;
    }

    .selected-border {
        border: 1px solid #f00 !important;
    }
</style>
<style lang="scss">
    .my-confirm-button {
        background-color: #d63103 !important;
        color: #fff !important;
        border: none;

        &:hover {
            background-color: #d63103;
            color: #fff;
        }
    }

    .el-message-box__header .el-message-box__title {
        justify-content: left !important;
    }

    .my-cancel-button {
        background-color: #cccccc !important;
        color: #000 !important;
        border: none;

        &:hover {
            background-color: #cccccc !important;
            color: #000 !important;
        }
    }
</style>